<template>
  <ul style="padding-left: 20px">
    <template v-for="(item, index) in list">
      <li :key="index" v-if="item.show" @click.stop="handToggleShow(item)">
        <p>{{ item.name }}</p>
        <tree-menus v-if="item.children" :list="item.children"></tree-menus>
      </li>
    </template>
  </ul>
</template>
<script>
export default {
  name: 'tree-menus',
  props: ['list'],
  watch: {
    list(v) {
      console.log('list:', v)
    },
  },
  created() {
    console.log('list:=========', this.list)
  },
  methods: {
    handToggleShow(item) {
      console.log(item.name, 'name')
      if (item.children) {
        item.children.forEach((item) => {
          item.show = !item.show
        })
      }
    },
  },
}
</script>
